<!-- 左侧菜单 -->
<template>
  <div class="nav_menu">
    <!-- logo -->
    <div class="logo">
      <img src="~@/assets/svg/logo.svg" alt="" srcset="">
      <span :style="{ opacity: !isFold ? 1 : 0 }">vue3+TS</span>
    </div>
    <!-- menu -->
    <el-menu :collapse="isFold" :default-active="defaultActive" class="el_menu_vertical">
      <template v-for="item in menus" :key="item.id">
        <!-- 二级级菜单 -->
        <template v-if="item.menu_type === 0">
          <!-- 二级级菜单标题 -->
          <el-submenu :index="item.id + ''">
            <template #title>
              <template v-if="item.icon">
                <svg-icon  :icon="item.icon"></svg-icon>
                
              </template>

              <span>{{ item.menu_name }}</span>
            </template>
            <!-- subMenuItem -->
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.id + ''" @click="handleMenuItemClick(subItem)">
                <template v-if="subItem.icon">
                  <svg-icon  :icon="subItem.icon"></svg-icon>
                  
                </template>
                <span>{{ subItem.menu_name }}</span>
              </el-menu-item>
            </template>
          </el-submenu>

        </template>
        <!-- 一级级级菜单 -->
        <template v-else-if="item.menu_type === 1">
          <!-- 展示菜单图标 -->
          <el-menu-item :index="item.id + ''" :key="item.id" @click="handleMenuItemClick">
            <template v-if="item.icon">
              <svg-icon  :icon="item.icon"></svg-icon>
             
            </template>
            <span>{{ item.menu_name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script setup lang='ts' >
import { computed, ref } from 'vue'
import { useStore } from '@/store/index';
import { useRouter, useRoute } from "vue-router"
import { pathToMenuITemActive } from "@/utils/menu-map"

const store = useStore()
const router = useRouter()
const route = useRoute()

defineProps({
  isFold: {
    type: Boolean,
    default: () => { return false },
  }
})


let menus = computed(() => store.state.login.menus)
let menu = pathToMenuITemActive(route.path, menus.value)
let defaultActive = ref(menu?.id + '')

const handleMenuItemClick = (item: any) => {
  router.push(item.path + '')
}
 
</script>

<style lang='less' scoped>
.nav_menu {
  .logo {
    width: 90%;
    height: 60px;
    display: flex;
    align-items: center;


    img {
      width: 32px;
      margin: 0 10px;
      vertical-align: middle;
    }

    span {
      transition: all 0.5s;
      font-size: 1.2em;

    }
  }
}

.el_menu_vertical {
  background: transparent;
  border-right: none;

  ::v-deep .el-submenu__title {
    color: rgb(@primaryMenuTextColor);
  }

  ::v-deep .el-submenu__title:hover {
    background: transparent;
  }

  ::v-deep .el-submenu.is-opened .el-submenu__title {
    background: rgb(@primaryMenuColor, 1);
  }


  ::v-deep .el-menu-item:hover {
    background: rgb(@activeColor, 0.8);
    color: rgb(@color);

  }

  ::v-deep .el-menu-item {
    color: rgb(@color, 0.6);

    margin-left: -20px;
  }

  ::v-deep .el-menu-item.is-active {
    color: rgb(@color);
    background: rgb(@activeColor);
  }

}

::v-deep .el-menu {
  background-color: transparent;
}
</style>
